<template>
<view class="page_jr">
<view class="top_div">
	<view class="money">{{data.money*1}}</view>
	<view class="top_text">最高额度(万元)</view>
	<view class="top_text">-{{data.finance_name}}-</view>
	<view class="flex_sb">
		<view class="top_item">
			<view class="top_text">参考利率(%)</view>
			<view class="top_num">{{data.rate*1}}%</view>
		</view>
		<view class="top_item">
			<view class="top_text">期限</view>
			<view class="top_num">1-{{data.month}}月</view>
		</view>
	</view>
</view>
<view class="box_card">
		<view class="box_card_title">适用于客户</view>
		<view class="xx">{{data.type_name}}</view>
	</view>
	
	<view class="box_card">
		<view class="box_card_title">申请条件</view>
		<view class="xx" v-html="data.content"></view>
	</view>
	
	<view class="box_card">
		<view class="box_card_title">申请材料</view>
		<view class="xx" v-html="data.condition"></view>
	</view>
	
	<view class="flex_c flex_ac phone box_card" style="font-size: 18px;" @click="toPhone">
		<image style="width: 20px;margin-right: 6px;" src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/my/icondh.png" mode="widthFix"></image>
		{{data.tel}}
	</view>
	<view class="" style="height: 40px;width: 100%;">
		
	</view>
	<bottomDetail :data='data' :type="14" :id='id' btnName='咨询'></bottomDetail>
</view>
</template>

<script>
	import {jinrong } from '@/utils/api.js'
	import bottomDetail from '@/components/bottomDetail'
	export default {
		data() {
			return {
				data:{},
				id:''
			}
		},
		components:{
			bottomDetail
		},
		onLoad(option){
			this.id = option.id
			uni.setNavigationBarTitle({
				title:option.name
			})
			jinrong.getFinanceProductDetail({id:option.id}).then(res=>{
				this.data = res.data
			})
		},
		methods: {
			toPhone(){
				uni.makePhoneCall({
						phoneNumber: this.data.tel //仅为示例
				});
			}
		}
	}
</script>

<style scoped lang="scss">
page{
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
}
.page_jr{
	height: 100%;
	background-color: #f2f2f2;
}
.top_div{
	width: 100%;
	padding: 20px 0;
	background-color: #3BA7FF;
	color: #fff;
	font-size: 14px;
	text-align: center;
}
.top_item{
	width: 50%;
	text-align: center;
	color: #fff;
}
.money{
	font-size: 32px;
}
.top_text{
	margin-bottom: 6px;
}
.top_num{
	font-size: 16px;
}
.box_card{
	margin: 10px;
	border-radius: 6px;
	background-color: #fff;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);
	padding: 10px;
	font-size: 14px;
}
.box_card_title{
	padding-left: 10px;
	position: relative;
	font-size: 16px;
	font-weight: 800;
	color: #333;
	&::after{
		position: absolute;
		content: ' ';
		left: 0;
		top: 2px;
		width: 4px;
		height: 80%;
		background-color: #3BA7FF;
	}
}
.xx{
	padding: 10px;
}
.phone{
	display: flex;
	justify-content: center;
	text-align: center;
}
</style>
